<template>
  <div>
    <el-form ref="skuForm" label-width="80px" :inline="false" size="small">
      <el-form-item label="SPU名称">{{ spu.spuName }} </el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input type="number" v-model="skuInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input type="number" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="SKU描述">
        <el-input type="textarea" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-select
          v-for="item in attrList"
          :key="item.id"
          v-model="item.itemIdAttrId"
          :placeholder="item.attrName"
          style="margin: 0 10px 10px 0"
        >
          <el-option
            v-for="attr in item.attrValueList"
            :key="attr.id"
            :value="`${item.id}:${attr.id}`"
            :label="attr.valueName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form inline label-width="100px" size="small">
          <el-form-item
            :label="attr.saleAttrName"
            style="margin: 5px 0"
            v-for="attr in spuSaleAttrList"
            :key="attr.id"
          >
            <el-select v-model="attr.saleAttrValueId" placeholder="请输入">
              <el-option
                :label="value.saleAttrValueName"
                :value="value.id"
                v-for="value in attr.spuSaleAttrValueList"
                :key="value.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table border stripe :data="spuImageList">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="{ row }">
              <img
                :src="row.imgUrl"
                alt=""
                style="width: 100px; height: 100px"
              /> </template
          ></el-table-column>
          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-tag type="success" v-if="row.isDefault === '1'">默认</el-tag>
              <el-button
                type="primary"
                size="small"
                v-else
                @click="setDefault(row)"
                >设为默认</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SkuForm",
  data() {
    return {
      spu: {},
      skuInfo: {
        // 下面3个数据从父组件传入收集
        category3Id: null, // 3级分类ID
        spuId: null, // SPU的id
        tmId: null, // 品牌ID

        // 下面4个通过v-model收集
        skuName: null, // sku的名称
        skuDesc: null, // sku的描述
        price: null, // sku的价格
        weight: null, // sku的重量

        skuDefaultImg: null, // sku的默认图片
        skuAttrValueList: [], // sku的属性值列表
        skuSaleAttrValueList: [], // sku属性属性值列表
        skuImageList: [], // 选择的spu图片列表
      },
      attrList: [], // 平台属性数组
      spuSaleAttrList: [], // spu销售属性数组
      spuImageList: [], // spu图片数组
      selectedSpuImageList: [], // 所有选中的spu图片列表
    };
  },
  methods: {
    initAddSku(spu) {
      this.spu = spu;
      this.skuInfo.category3Id = spu.category3Id;
      this.skuInfo.spuId = spu.id;
      this.skuInfo.tmId = spu.tmId;
      this.getAddDate();
    },
    async getAddDate() {
      const { category1Id, category2Id, category3Id, id } = this.spu;
      let attrRes = await this.$API.spu.getList(
        category1Id,
        category2Id,
        category3Id
      );
      let imgres = await this.$API.spu.getSpuImageList(id);
      let saleRes = await this.$API.spu.getSpuSaleAttrList(id);
      this.attrList = attrRes.data;
      this.spuSaleAttrList = saleRes.data;
      this.spuImageList = imgres.data;
    },
    async save() {
      const { skuInfo, attrList, spuSaleAttrList, selectedSpuImageList } = this;
      attrList.forEach((attr) => {
        if (attr.attrIdValueId) {
          const [attrId, valueId] = attr.attrIdValueId.split(":"); 
          skuInfo.skuAttrValueList.push({
            attrId,
            valueId,
          });
        }
      });
      skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((pre, attr) => {
        if (attr.saleAttrValueId) {
          pre.push({ saleAttrValueId: attr.saleAttrValueId });
        }
        return pre;
      }, []);
      skuInfo.skuImageList = selectedSpuImageList.map((item) => ({
        imgName: item.imgName,
        imgUrl: item.imgUrl,
        spuImgId: item.id, // 当前Spu图片的id
        isDefault: item.isDefault, // 默认为"1", 非默认为"0"
      }));
      // 发请求
      await this.$API.spu.addUpdate(skuInfo);
      // 成功了...
      this.$message.success("保存SKU成功");
      // 重置数据
      this.resetData();
      // 通知父组件
      this.$emit("success");
    },
    resetData() {
      this.spu = {}; // 所属的spu对象
      this.skuInfo = {
        // 下面3个数据从父组件传入收集
        category3Id: null, // 3级分类ID
        spuId: null, // SPU的id
        tmId: null, // 品牌ID

        // 下面4个通过v-model收集
        skuName: null, // sku的名称
        skuDesc: null, // sku的描述
        price: null, // sku的价格
        weight: null, // sku的重量

        skuDefaultImg: null, // sku的默认图片
        skuAttrValueList: [], // sku的属性值列表
        skuSaleAttrValueList: [], // sku属性属性值列表
        skuImageList: [], // 选择的spu图片列表
      };

      this.attrList = []; // 平台属性数组
      this.spuSaleAttrList = []; // spu销售属性数组
      this.spuImageList = []; // spu图片数组
      this.selectedSpuImageList = []; // 所有选中的spu图片列表
    },

    back() {
      this.resetData();
      this.$emit('changescene');
    },
  },
};
</script>

<style lang="scss" scoped>
</style>